<template>
  <div class="wapper">
    <div class="my_info">
      <div class="my_info_con">
        <img
          class="my_pic"
          src="http://www.dell-lee.com/imgs/vue3/user.png"
          alt=""
        />
        <div class="my_name">吴淑亚</div>
      </div>
    </div>
    <router-link :to="{ path: `/MyAddress` }">
      <div class="my_address">
        <span class="address_icon iconfont">&#xe66b;</span>
        我的地址
        <span class="address_enter_icon iconfont">&#xe617;</span>
      </div>
    </router-link>
    <!-- <router-link :to="{ path: `/Login` }"> -->
    <div class="quit_login" @click="() => showConfirmMask(true)">退出登陆</div>
    <!-- </router-link> -->
  </div>
  <div class="mask" v-if="showConfirm" @click="() => showConfirmMask(false)">
    <div class="mask__content" @click.stop>
      <h4 class="mask__title">确认要退出登陆吗？</h4>
      <div class="mask__btns">
        <div class="mask__btns__cancel" @click="() => showConfirmMask(false)">
          取消
        </div>
        <div class="mask__btns__submit" @click="handleConfirmOrder">
          确认退出
        </div>
      </div>
    </div>
  </div>
  <Docker :currentIndex="3" />
</template>
<script>
import Docker from "../../components/Docker";
import { ref } from "vue";
import { useRouter } from "vue-router";
const useShowMaskEffect = () => {
  const showConfirm = ref(false);
  const showConfirmMask = (showConfirmStatus) => {
    showConfirm.value = showConfirmStatus;
  };

  return { showConfirmMask, showConfirm };
};
export default {
  name: "MyInfo",
  components: { Docker },
  setup() {
    const router = useRouter();
    const { showConfirmMask, showConfirm } = useShowMaskEffect();
    const handleConfirmOrder = () => {
      localStorage.clear();
      router.push({ path: "/Login" });
    };
    return { showConfirm, showConfirmMask, handleConfirmOrder };
  },
};
</script>
<style lang="scss" scoped>
@import "../../style/viriables.scss";
.wapper {
  overflow-y: scroll;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0.5rem;
  background-color: #eee;
  a {
    text-decoration: none;
    color: #333;
  }
}
.my_info {
  background-color: $blue-color;
  padding: 0.7rem 0.16rem 0.05rem 0.16rem;
  .my_info_con {
    height: 1rem;
    position: relative;
    background-color: $white-color;
    border-radius: 0.05rem;
    .my_pic {
      position: absolute;
      top: -0.3rem;
      left: 50%;
      transform: translateX(-50%);
      width: 0.6rem;
      height: 0.6rem;
    }
    .my_name {
      position: absolute;
      top: 0.4rem;
      left: 50%;
      transform: translateX(-50%);
      font-size: 0.16rem;
    }
  }
}
.my_address {
  box-sizing: border-box;
  padding: 0 0.16rem;
  margin: 0.18rem;
  line-height: 0.6rem;
  font-size: 0.14rem;
  background-color: $white-color;
  border-radius: 0.05rem;
  box-shadow: 0 0.04rem 0.06rem rgba(0, 0, 0, 0.1);
  .address_icon {
    color: $blue-color;
    margin-right: 0.08rem;
  }
  .address_enter_icon {
    float: right;
    font-size: 0.12rem;
    color: $border-color;
  }
}
.quit_login {
  margin: 0 0.18rem;
  line-height: 0.3rem;
  text-align: center;
  color: $white-color;
  background-color: $blue-color;
  border-radius: 0.03rem;
}
.mask {
  z-index: 2;
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  right: 0;
  background-color: rgba(0, 0, 0, 0.5);
  .mask__content {
    box-sizing: border-box;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translateX(-50%) translateY(-50%);
    width: 3rem;
    height: 1.3rem;
    text-align: center;
    background-color: #fff;
    border-radius: 0.04rem;
    .mask__title {
      margin: 0;
      margin-top: 0.14rem;
      font-size: 0.18rem;
      line-height: 0.25rem;
    }
    .mask__btns {
      display: flex;
      margin: 0.24rem 0.58rem 0 0.58rem;
      .mask__btns__cancel,
      .mask__btns__submit {
        box-sizing: border-box;
        flex: 1;
        width: 0.8rem;
        line-height: 0.32rem;
        font-size: 0.14rem;
        border: 0.01rem solid $blue-color;
        border-radius: 0.16rem;
      }
      .mask__btns__cancel {
        margin-right: 0.3rem;
        color: $blue-color;
      }
      .mask__btns__submit {
        color: #fff;
        background-color: $blue-color;
      }
    }
  }
}
</style>
